<template>
  <el-row style="height: 100vh">
    <el-col :span="5">
      <ResultList :resultItems="resultItems" @report="handleEvaluate" />
    </el-col>
    <el-col
      :span="19"
      class="main-content-container"
      :style="{ height: view.height + 'px', position: 'relative' }"
    >
      <el-row>
        <el-col
          :span="24"
          class="paltform-container"
          :style="`height:${view.height}px`"
        >
          <div class="header">
            <div class="tit-warp">
              <span class="tit-name"> 洪涝灾害遥感应急监测 </span>
            </div>
            <div class="tab-container">
              <div class="tab-box left-box">
                <!-- <div class="custom-button-warp">
                  <div class="custom-button active">红线检测任务</div>
                </div>
                <div class="custom-button-warp">
                  <div class="custom-button">委托生产任务</div>
                </div>
                <div class="custom-button-warp">
                  <div class="custom-button">自定义按钮</div>
                </div> -->
              </div>
              <div class="tab-box middle-box"></div>
              <div class="tab-box right-box">
                <div class="custom-button-warp">
                  <div class="custom-button1">&nbsp;</div>
                  <!-- <div class="custom-button">自定义按钮</div> -->
                </div>
                <div class="custom-button-warp">
                  <div class="custom-button1">&nbsp;</div>
                  <!-- <div class="custom-button">自定义按钮</div> -->
                </div>
                <div class="custom-button-warp">
                  <div class="custom-button" @click="gotoSystem2">洪涝灾害应急监测</div>
                </div>
              </div>
            </div>
          </div>
          <div id="map-container" :style="`height:${view.height}px`"></div>
          <div id="mouse-position" class="position_coordinate"></div>

          <ExcelPreview
            :openStatus="isPreviewOpen"
            @close="isPreviewOpen = false"
          />

          <!-- 卷帘控件 -->
          <div
            class="ol-control ol-unselectable my-swipe"
            :style="{ pointerEvents: isMoving ? 'auto' : 'none' }"
            id="mySwipe"
            ref="mySwipeRef"
            @mousemove="mouseMove"
            @mouseup="mouseUp"
          >
            <div
              class="my-swipe-line swipe-horizontal"
              :style="{
                left: swipeVal + '%',
                pointerEvents: isMoving ? 'none' : 'auto',
              }"
            >
              <span
                class="my-swipe-line-btn"
                :style="{ pointerEvents: isMoving ? 'none' : 'auto' }"
                @mousedown="mouseDown"
              >
                <el-image :src="dragImg" alt="拖动" style="width: 50px" />
              </span>
            </div>
          </div>

          <!-- 图层控制面板 -->
          <div style="position: relative">
            <el-card
              style="width: 400px"
              class="edit-container"
              :class="{ collapsed: isPanelCollapsed }"
            >
              <!-- 添加折叠按钮 -->
              <el-button
                class="collapse-btn"
                type=""
                size="small"
                @click="togglePanel"
              >
                {{ isPanelCollapsed ? "底图" : "收起" }}
              </el-button>

              <transition name="fade">
                <div class="tool-body" v-show="!isPanelCollapsed">
                  <!-- 底图选择 -->
                  <el-collapse-transition>
                    <el-card class="base-layer-card" size="small">
                      <template #header>
                        <div class="base-layer-header">
                          <span>底图选择</span>
                        </div>
                      </template>
                      <div class="base-layer-container">
                        <el-card
                          v-for="layer in baseLayers"
                          :key="layer.type"
                          :body-style="{ padding: '0px' }"
                          class="img-card"
                          :class="{ active: currentBaseLayer === layer.type }"
                          @click="baseImageClickHandler(layer)"
                        >
                          <el-image
                            style="width: 111px; height: 81px"
                            :src="layer.img"
                            :fit="'fill'"
                          />
                          <div style="padding: 5px; text-align: center">
                            <span>{{ layer.name }}</span>
                          </div>
                        </el-card>
                      </div>
                    </el-card>
                  </el-collapse-transition>

                  <!-- 卷帘控制面板 -->
                  <el-card class="swipe-card" size="small">
                    <template #header>
                      <div class="swipe-header">
                        <span>卷帘控制</span>
                      </div>
                    </template>
                    <div class="swipe-container">
                      <!-- 卷帘模式选择 -->
                      <div class="swipe-mode-select mb-3">
                        <div class="section-label">卷帘模式</div>
                        <el-select
                          v-model="swipeMode"
                          placeholder="选择卷帘模式"
                          @change="changeSwipeMode"
                          class="w-full"
                        >
                          <el-option
                            label="洪涝前图层和成果图层"
                            value="beforeResult"
                          ></el-option>
                          <el-option
                            label="洪涝后图层和成果图层"
                            value="afterResult"
                          ></el-option>
                          <el-option
                            label="洪涝前图层和洪涝后图层"
                            value="beforeAfter"
                          ></el-option>
                        </el-select>
                      </div>

                      <!-- 成果图层控制 -->
                      <div class="result-layer-control">
                        <div class="section-label">成果图层</div>

                        <!-- 可见性开关 -->
                        <div class="flex justify-between items-center mb-2">
                          <span>显示成果图层</span>
                          <el-switch
                            v-model="resultLayerVisible"
                            @change="toggleResultLayer"
                          ></el-switch>
                        </div>

                        <!-- 透明度控制 -->
                        <div class="opacity-control">
                          <div class="flex justify-between items-center mb-1">
                            <span>透明度</span>
                            <span
                              >{{ Math.round(resultLayerOpacity * 100) }}%</span
                            >
                          </div>
                          <el-slider
                            v-model="resultLayerOpacity"
                            :min="0"
                            :max="1"
                            :step="0.01"
                            @input="changeResultLayerOpacity"
                          ></el-slider>
                        </div>
                      </div>
                    </div>
                  </el-card>
                </div>
              </transition>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <!-- 在主模板底部添加 -->
  <LoadingOverlay :loading="isLoading" :message="loadingMessage" />
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref, toRefs, onMounted, watch } from "vue";
import {
  Close,
  Edit,
  Picture,
  Upload,
  PictureFilled,
  Operation,
  Postcard,
  Drizzling,
} from "@element-plus/icons-vue";
import paginationCustom from "@/components/pagination/paginationCustom.vue";
import { ArrowLeft, ArrowRight } from "@element-plus/icons-vue";
import { Map, View } from "ol";
import { Tile as TileLayer, Image, Vector as VectorLayer } from "ol/layer";
import { WMTS, TileWMS, OSM, Tile, ImageWMS, TileImage } from "ol/source";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { get, fromLonLat } from "ol/proj";
import MousePosition from "ol/control/MousePosition";
import { format as formatAxirs } from "ol/coordinate";
import "ol/ol.css"; // 导入 OpenLayers 样式文件
import { ScaleLine, defaults as defaultControls } from "ol/control";
import { getWidth, getTopLeft, boundingExtent } from "ol/extent";
import HttpService from "@/api/api";
import baseImg1 from "@/assets/img/vec.jpg";
import baseImg2 from "@/assets/img/img.jpg";
import baseImg3 from "@/assets/img/ter.jpg";
import utils from "@/utils/util";
import config from "@/config/config";
import { Vector as VectorSource } from "ol/source";
import { GeoJSON } from "ol/format";
import { Style, Fill, Stroke } from "ol/style";
import { Feature } from "ol";
import axios from "axios";
import Control from "ol/control/Control";
import dragImg from "./drag.png";
import ExcelPreview from "./ExcelPreview.vue";
import ResultList from "./ResultList.vue"; // 路径根据你项目调整
// 在script setup中添加
import LoadingOverlay from "./LoadingOverlay.vue";
const isLoading = ref(false);
const loadingMessage = ref("评估中...");

// 修改评估按钮事件处理函数
const handleEvaluate = (item) => {
  // 显示"评估中..."加载状态
  loadingMessage.value = "评估中... 0%";
  isLoading.value = true;

  // 创建进度更新函数
  let progress = 0;
  const progressInterval = setInterval(() => {
    progress += 5;
    if (progress <= 90) {
      loadingMessage.value = `评估中... ${progress}%`;
    }
  }, 250); // 每250毫秒更新一次，总共会更新到90%

  // 模拟评估过程(4.5秒)
  setTimeout(() => {
    // 停止进度更新
    clearInterval(progressInterval);

    // 更新为"评估完成"状态
    loadingMessage.value = "评估完成 100%";

    // 再等待0.6秒
    setTimeout(() => {
      loadingMessage.value = "正在打开评估报告...";

      // 再等待1.2秒+
      setTimeout(() => {
        // 隐藏加载状态
        isLoading.value = false;

        // 触发事件打开预览
        openPreview(item);
      }, 1200);
    }, 600);
  }, 6500);
};
// 定义响应式变量
const isMoving = ref(false);
const swipeVal = ref(50);
const mySwipeRef = ref(null);
const swipeMode = ref("beforeResult"); // 卷帘模式
const currentBaseLayer = ref("imgLayer");
const resultLayerVisible = ref(true);
const resultLayerOpacity = ref(1); // 成果图层透明度
const beforeLayerVisible = ref(true); // 洪涝前图层可见性
const afterLayerVisible = ref(true); // 洪涝后图层可见性

const selectedTask = ref({ name: "示例任务" });
const isPreviewOpen = ref(false);

// 新增：控制面板折叠状态
const isPanelCollapsed = ref(true);

// 切换面板折叠状态
const togglePanel = () => {
  isPanelCollapsed.value = !isPanelCollapsed.value;

  // 当展开面板时，确保地图重新渲染以更新卷帘效果
  if (!isPanelCollapsed.value && map) {
    map.updateSize();
    map.render();
  }
};

// 某处触发预览：
const openPreview = (task) => {
  selectedTask.value = task;
  isPreviewOpen.value = true;
};
// 地图和图层变量
let map;
let leftLayer = null; // 卷帘左侧图层
let rightLayer = null; // 卷帘右侧图层
let beforeLayer, afterLayer, resultLayer; // 全局图层变量

// 底图图层
const baseLayers = [
  {
    type: "vecLayer",
    name: "矢量底图",
    img: baseImg1,
  },
  {
    type: "imgLayer",
    name: "影像底图",
    img: baseImg2,
  },
  {
    type: "terLayer",
    name: "地形晕渲",
    img: baseImg3,
  },
];

// 投影和分辨率设置
const resolutions = [];
const projection = get("EPSG:4326");
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
for (let z = 2; z < 19; ++z) {
  resolutions[z] = size / Math.pow(2, z);
}

// 底图切换处理函数
const baseImageClickHandler = function (layer) {
  switchBaseLayer(layer.type);
  currentBaseLayer.value = layer.type;
};

// 底图切换函数
const switchBaseLayer = (layerType) => {
  if (!map) return;
  map.getLayers().forEach((layer) => {
    if (layer.values_.name == layerType || layer.values_.name == "cvaLayer") {
      layer.setVisible(true);
    } else if (
      layer.values_.name == "resultLayer" ||
      layer.values_.name == "beforeLayer" ||
      layer.values_.name == "afterLayer"
    ) {
      // 专题图层保持原来的可见性设置
      return;
    } else {
      layer.setVisible(false);
    }
  });
};

// 卷帘预渲染函数 - 对左侧图层
prerenderLeft = (e) => {
  const ctx = e.context;
  const width = ctx.canvas.width;
  const clipWidth = (width * swipeVal.value) / 100;

  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, clipWidth, ctx.canvas.height);
  ctx.clip();
};

// 卷帘后渲染函数
let postrenderLeft = (e) => {
  const ctx = e.context;
  ctx.restore();
};

// 卷帘预渲染函数 - 对右侧图层
let prerenderRight = (e) => {
  const ctx = e.context;
  const width = ctx.canvas.width;
  const clipWidth = (width * swipeVal.value) / 100;

  ctx.save();
  ctx.beginPath();
  ctx.rect(clipWidth, 0, width - clipWidth, ctx.canvas.height);
  ctx.clip();
};

// 卷帘后渲染函数
const postrenderRight = (e) => {
  const ctx = e.context;
  ctx.restore();
};

// 设置卷帘图层
const setupSwipeLayers = () => {
  // 1. 先移除所有图层上的渲染事件
  map.getLayers().forEach((layer) => {
    layer.un("prerender", prerenderLeft);
    layer.un("postrender", postrenderLeft);
    layer.un("prerender", prerenderRight);
    layer.un("postrender", postrenderRight);
  });

  // 2. 清空左右图层引用
  leftLayer = null;
  rightLayer = null;

  // 3. 设置所有图层初始可见性
  if (beforeLayer) beforeLayer.setVisible(false);
  if (afterLayer) afterLayer.setVisible(false);
  if (resultLayer) resultLayer.setVisible(resultLayerVisible.value); // 尊重成果图层的可见性设置

  // 4. 根据卷帘模式设置图层可见性和卷帘效果
  switch (swipeMode.value) {
    case "beforeResult":
      // 洪涝前和成果模式
      if (beforeLayer) {
        // 洪涝前图层在整个地图上可见
        beforeLayer.setVisible(true);
      }
      if (resultLayer) {
        // 成果图层只在右侧可见
        resultLayer.setVisible(true);
        rightLayer = resultLayer;
      }
      break;

    case "afterResult":
      // 洪涝后和成果模式
      if (afterLayer) {
        // 洪涝后图层在整个地图上可见
        afterLayer.setVisible(true);
      }
      if (resultLayer) {
        // 成果图层只在右侧可见
        resultLayer.setVisible(true);
        rightLayer = resultLayer;
      }
      break;

    case "beforeAfter":
      // 洪涝前和洪涝后模式
      // 洪涝前图层在左侧可见
      if (beforeLayer) {
        beforeLayer.setVisible(true);
        leftLayer = beforeLayer;
      }
      // 洪涝后图层在右侧可见
      if (afterLayer) {
        afterLayer.setVisible(true);
        rightLayer = afterLayer;
      }
      // 成果图层在整个地图上可见，没有卷帘效果
      // 依靠透明度控制来显示底层的影像
      break;
  }

  // 5. 应用渲染事件
  if (leftLayer) {
    leftLayer.on("prerender", prerenderLeft);
    leftLayer.on("postrender", postrenderLeft);
  }
  if (rightLayer) {
    rightLayer.on("prerender", prerenderRight);
    rightLayer.on("postrender", postrenderRight);
  }

  // 6. 触发地图重新渲染
  if (map) map.render();
};
// 改进的渲染函数，确保更清晰的裁剪效果
var prerenderLeft = (event) => {
  const ctx = event.context;
  const width = ctx.canvas.width;
  const clipWidth = (width * swipeVal.value) / 100;

  ctx.save();
  ctx.beginPath();
  ctx.rect(0, 0, clipWidth, ctx.canvas.height);
  ctx.clip();
};

prerenderRight = (event) => {
  const ctx = event.context;
  const width = ctx.canvas.width;
  const clipWidth = (width * swipeVal.value) / 100;

  ctx.save();
  ctx.beginPath();
  ctx.rect(clipWidth, 0, width - clipWidth, ctx.canvas.height);
  ctx.clip();
};

// 切换洪涝前图层可见性
const toggleBeforeLayer = () => {
  if (!map) return;

  // 更新图层可见性
  if (beforeLayer) {
    beforeLayer.setVisible(beforeLayerVisible.value);
  }

  // 更新卷帘设置
  setupSwipeLayers();
};

// 切换洪涝后图层可见性
const toggleAfterLayer = () => {
  if (!map) return;

  // 更新图层可见性
  if (afterLayer) {
    afterLayer.setVisible(afterLayerVisible.value);
  }

  // 更新卷帘设置
  setupSwipeLayers();
};

// 切换成果图层可见性
const toggleResultLayer = () => {
  if (!map) return;

  // 更新图层可见性
  if (resultLayer) {
    resultLayer.setVisible(resultLayerVisible.value);
  }

  // 更新卷帘设置
  setupSwipeLayers();
};

// 更改成果图层透明度
const changeResultLayerOpacity = () => {
  if (!map) return;

  // 设置图层透明度
  if (resultLayer) {
    resultLayer.setOpacity(resultLayerOpacity.value);
  }

  // 刷新卷帘设置
  setupSwipeLayers();
};

// 更改卷帘模式
const changeSwipeMode = () => {
  // 更新卷帘设置
  setupSwipeLayers();
};

// 鼠标事件处理函数
const mouseMove = (e) => {
  if (!isMoving.value) return;

  const clientWidth = e.currentTarget.clientWidth;
  const x = e.offsetX;

  // 确保x在边界内
  if (x < 0 || x > clientWidth) return;

  // 更新卷帘值
  swipeVal.value = (x / clientWidth) * 100;

  // 触发地图重新渲染
  if (map) map.render();
};

const mouseDown = (e) => {
  isMoving.value = true;
};

const mouseUp = (e) => {
  isMoving.value = false;
};

// 初始化地图
const initMap = function () {
  // 创建WMS图层 - 洪涝前
  beforeLayer = new Image({
    source: new ImageWMS({
      url: "http://123.57.240.141:8055/geoserver/result/wms",
      params: {
        LAYERS: "result:flood_qian_render_1", // 图层名称
        VERSION: "1.1.0",
        FORMAT: "image/png", // 图像格式
      },
      serverType: "geoserver",
      ratio: 1,
    }),
  });
  beforeLayer.set("name", "beforeLayer");

  // 创建WMS图层 - 洪涝后
  afterLayer = new Image({
    source: new ImageWMS({
      url: "http://123.57.240.141:8055/geoserver/result/wms",
      params: {
        LAYERS: "result:flood_hou_render_1", // 图层名称
        VERSION: "1.1.0",
        FORMAT: "image/png", // 图像格式
      },
      serverType: "geoserver",
      ratio: 1,
    }),
  });
  afterLayer.set("name", "afterLayer");

  // 创建WMS图层 - 洪涝结果
  resultLayer = new Image({
    source: new ImageWMS({
      url: "http://123.57.240.141:8055/geoserver/result/wms",
      params: {
        LAYERS: "result:flood_result", // 图层名称
        VERSION: "1.1.0",
        FORMAT: "image/png", // 图像格式
      },
      serverType: "geoserver",
      ratio: 1,
    }),
  });
  resultLayer.set("name", "resultLayer");
  // 设置初始透明度
  resultLayer.setOpacity(resultLayerOpacity.value);

  // 天地图密钥
  const TIANDI_KEY = "eec7fae87888db2dc4c30c0c458fb66b";
  const matrixSet = "c";

  // 创建地形底图
  const terLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"ter"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "ter",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous", // 解决跨域问题
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  terLayer.set("name", "terLayer");

  // 创建影像底图
  const imgLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"img"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "img",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  imgLayer.set("name", "imgLayer");

  // 创建矢量底图
  const vecLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"vec"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "vec",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  vecLayer.set("name", "vecLayer");

  // 创建标注图层
  const cvaLayer = new TileLayer({
    source: new WMTS({
      url: `http://t{0-6}.tianditu.com/${"cva"}_${matrixSet}/wmts?tk=${TIANDI_KEY}`,
      layer: "cva",
      matrixSet: matrixSet,
      style: "default",
      crossOrigin: "anonymous",
      format: "tiles",
      wrapX: true,
      tileGrid: new WMTSTileGrid({
        origin: getTopLeft(projectionExtent),
        resolutions: resolutions,
        matrixIds: [
          "0",
          "1",
          "2",
          "3",
          "4",
          "5",
          "6",
          "7",
          "8",
          "9",
          "10",
          "11",
          "12",
          "13",
          "14",
          "15",
          "16",
          "17",
          "18",
          "19",
          "19",
          "20",
        ],
      }),
    }),
  });
  cvaLayer.set("name", "cvaLayer");

  // 设置初始中心点
  const longitude = 115.88;
  const latitude = 29.06;
  const initialCenter = fromLonLat([longitude, latitude], projection);

  // 创建地图
  map = new Map({
    target: "map-container",
    layers: [
      // 底图
      terLayer,
      vecLayer,
      imgLayer,
      // 专题图层
      beforeLayer,
      afterLayer,
      resultLayer,
      // 标注图层
      cvaLayer,
    ],
    view: new View({
      projection: projection,
      center: initialCenter,
      zoom: 13.5,
    }),
    controls: defaultControls({
      attribution: true,
      zoom: false,
      rotate: true,
    }).extend([]),
  });

  // 设置初始卷帘图层
  setupSwipeLayers();

  // 添加鼠标位置控件
  var mousePositionControl = new MousePosition({
    coordinateFormat: function (coordinate) {
      return formatAxirs(coordinate, "经度:{x} 纬度:{y}", 2);
    },
    projection: "EPSG:4326",
    className: "custom-mouse-position",
    target: document.getElementById("mouse-position"),
  });
  map.addControl(mousePositionControl);

  // 添加比例尺控件
  let scaleLine = new ScaleLine({
    units: "metric",
  });
  map.addControl(scaleLine);

  // 添加自定义卷帘控件
  const swipeControl = new Control({
    element: document.getElementById("mySwipe"),
  });
  map.addControl(swipeControl);

  // 设置默认显示的底图
  switchBaseLayer(currentBaseLayer.value);
};

// 组件示例成果数据
const resultItems = ref([
  { name: "洪涝灾害", time: "2023-03-08", remark: "洪涝灾害" },
  { name: "洪涝灾害", time: "2023-03-12", remark: "洪涝灾害" },
  { name: "洪水灾害", time: "2023-06-27", remark: "洪涝灾害" },
]);

// 监听成果列表组件事件
const onConfirmResult = (item) => {
  console.log("用户选择的成果:", item);
  // 你可以在这里实现，点击后切换地图上的专题图层，比如加载对应WMS，或者调整视图
};

const onCancelResult = () => {
  console.log("取消成果选择");
  // 你可以在这里实现隐藏侧边栏、恢复默认状态等
};
const openReport = (task) => {
  console.log(task);
};
onMounted(async () => {
  await initMap();
});

// 用于自适应高度的响应式对象
const view = reactive({
  height: window.innerHeight,
});

const gotoSystem2 =function(){
  window.open('http://123.57.240.141:3002/custom',"_blank")
}


// 窗口大小变化时自适应高度
window.onresize = () => {
  view.height = window.innerHeight;
};
</script>

<style lang="scss" scoped>
.header {
  background: url("@/assets/bigScreen/img/title_back.png") no-repeat center;
  background-size: 100% 100%;
  width: 100%;
  height: 114px;
  display: flex;
  position: relative;
  justify-content: space-between;
  background-position: 0px -13px;
  z-index: 200;

  .tit-warp {
    position: relative;
    top: 12px;
    width: 100%;
    display: flex;
    justify-content: center;

    .tit-name {
      font-size: 28px;
      color: #d1e5ff;
      line-height: 30px;
      text-shadow: 1px 2px 0px rgba(95, 129, 151, 0.47),
        2px 4px 2px rgba(58, 99, 137, 0.15), 4px 10px 18px rgba(27, 41, 60, 0.5);
      background: linear-gradient(0deg, #ffffff 0%);
      -webkit-text-stroke: 1px #eff5ff;
      -webkit-text-fill-color: transparent;
    }
  }
}

#map-container {
  width: 100%;
  height: 600px;
  cursor: pointer;
  position: absolute;
  top: 0;
  z-index: 10;
}

.position_coordinate {
  color: #fff;
  position: absolute;
  font-size: 14px;
  bottom: 20px;
  right: 20px;
  z-index: 999;
  text-align: center;
  line-height: 30px;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  padding: 5px 10px;
  z-index: 110;
}

.base-layer-card {
  background: none;

  .base-layer-header {
    display: flex;
    justify-content: space-between;
  }

  .base-layer-container {
    display: flex;
    justify-content: space-between;

    .active {
      border: 2px solid #56a3f0;
    }
  }

  .img-card {
    border: 2px solid hsla(210, 96%, 54%, 0);
    cursor: pointer;

    &:hover {
      border: 2px solid #4685c4;
    }
  }
}

/* 卷帘控件样式 */
.my-swipe {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 110;
  background: none !important;
  padding: 0;
  pointer-events: none;
  top: 0;
  left: 0;
}

.my-swipe-line {
  position: absolute;
  width: 3px; /* 稍微粗一点的线条，提高可见性 */
  height: 100%;
  background: rgba(255, 255, 255, 0.8); /* 半透明白色，提高可见性 */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); /* 添加阴影增加深度感 */
}

.my-swipe-line-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  margin-left: -25px;
  background: white;
  border-radius: 50%;
  cursor: ew-resize; /* 更好的水平拖动指示器 */
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.5); /* 添加阴影增加深度感 */
  transition: transform 0.1s ease; /* 悬停效果的平滑过渡 */
}

.my-swipe-line-btn:hover {
  transform: translateY(-50%) scale(1.1); /* 悬停时略微放大效果 */
}

.my-swipe-line-btn:active {
  transform: translateY(-50%) scale(0.95); /* 按下效果 */
}

/* 卷帘控制面板样式 */
.swipe-card {
  margin-top: 10px;
  background: none;
}

.swipe-header {
  display: flex;
  justify-content: space-between;
  color: #d1e5ff;
}

.swipe-container {
  padding: 10px 0;
}

.section-label {
  color: #d1e5ff;
  font-size: 14px;
  margin-bottom: 8px;
}

.swipe-mode-select,
.swipe-slider,
.result-layer-control {
  margin-bottom: 16px;
}

.mb-1 {
  margin-bottom: 4px;
}

.mb-2 {
  margin-bottom: 8px;
}

.mb-3 {
  margin-bottom: 16px;
}

.w-full {
  width: 100%;
}

.flex {
  display: flex;
}

.justify-between {
  justify-content: space-between;
}

.items-center {
  align-items: center;
}
</style>
<style lang="scss">
.edit-container {
  z-index: 100;
  position: absolute;
  background: linear-gradient(0deg, #0b283b, rgba(21, 30, 40, 0.6));
  box-shadow: 0px 10px 19px 1px rgba(92, 99, 106, 0.38);
  border-radius: 3px;
  right: 34px;
  top: 50px;
  width: 300px;

  .tool-header {
    padding: 0 5px 5px;
    border-bottom: 1px solid rgb(109, 194, 236);
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .tool-body {
    .el-avatar {
      margin-right: 10px;
    }
  }

  .tool-footer {
    padding: 10px 5px;
    border-top: 1px solid rgb(109, 194, 236);
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-card__body {
    padding: 5px;

    .el-input__wrapper {
      color: #d1e5ff;
    }
  }

  .tool-body {
    & > .el-card {
      border: none !important;

      .el-card.is-always-shadow {
        box-shadow: none !important;
      }
    }

    .base-layer-card.is-always-shadow {
      box-shadow: none !important;
    }
  }
}

/* 为Element Plus组件添加暗色主题覆盖样式 */
.swipe-container .el-select {
  width: 100%;
}

.swipe-container .el-slider__runway {
  background-color: rgba(255, 255, 255, 0.2);
}

.swipe-container .el-slider__bar {
  background-color: #56a3f0;
}

.swipe-container .el-slider__button {
  border-color: #56a3f0;
}

/* 更新折叠按钮样式 */
.collapse-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 200;
  padding: 5px 10px;
  font-size: 12px;
}

/* 面板折叠时的样式 */
.edit-container.collapsed {
  width: 80px !important;
  height: 50px !important;
  transition: all 0.3s ease-out;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 确保折叠状态下面板内没有多余的padding */
.edit-container.collapsed .el-card__body {
  padding: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-container.collapsed .collapse-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 60px; /* 固定宽度 */
  height: 30px; /* 固定高度 */
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}
/* 渐变动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}

.tab-container {
  width: 100%;
  position: absolute;
  display: flex;
  top: 20px;
  z-index: 210;

  .tab-box {
    .custom-button {
      flex: 1;
      text-align: center;
      display: inline-block;
      width: 203px;
      height: 88px;
      line-height: 70px;
      font-weight: bold;
      font-size: 16px;
      text-shadow: 8px 11px 1px rgba(145, 199, 255, 0.05),
        18px 38px 32px rgba(0, 0, 0, 0.24);
      font-style: italic;
      background: url("@/assets/bigScreen/img/tab_button.png") no-repeat;
      color: #c1f5ff;
      background-position: 0px -10px;
      cursor: pointer;

      &:hover {
        background: url("@/assets/bigScreen/img/tab_button_active.png")
          no-repeat;
        background-position: 0px -10px;
      }
    }

    .custom-button1 {
      width: 203px;
      height: 88px;
    }

    .active {
      background: url("@/assets/bigScreen/img/tab_button_active.png") no-repeat;
      background-position: 0px -10px;
    }
  }

  .left-box {
    flex: 0.35;
    display: flex;
  }

  .middle-box {
    flex: 0.3;
  }

  .right-box {
    flex: 0.35;
    display: flex;
  }
}
</style>
